<template>
  <div class="login" @keyup.enter="loginClick">
    <div class="login-wrap">
      <i class="iconfont icon-kaiguan" @click="$router.back()"></i>
      <div class="login-img">
        <i class="iconfont icon-wangyiyunyinle"></i>
      </div>
      <h2 class="title">网易云</h2>
      <!-- 登录 -->
      <el-form :model="ruleForm" :rules="rules" ref="loginForm" label-width="80px" v-show="isLogin">
        <el-form-item label="手机号：" prop="checkPhone">
          <el-input type="text" v-model="ruleForm.phone" autocomplete="off" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item label="密码：" prop="checkPass">
          <el-input type="password" v-model="ruleForm.pass" autocomplete="off" placeholder="请输入密码"></el-input>
        </el-form-item>
      </el-form>

      <!-- 注册 -->
      <el-form :model="ruleForm" :rules="rules" ref="registerForm" label-width="80px" v-show="!isLogin">
        <el-form-item label="手机号：" prop="checkPhone">
          <el-input type="text" v-model="ruleForm.phone" autocomplete="off" placeholder="请输入要注册的手机号"></el-input>
        </el-form-item>
        <el-form-item label="密码：" prop="checkPass">
          <el-input type="password" v-model="ruleForm.pass" autocomplete="off" placeholder="请输入密码"></el-input>
        </el-form-item>
      </el-form>
      <div class="login-button">
        <el-button type="success" @click="loginClick">{{isLogin?'登录':'点击注册'}}</el-button>
        <el-button type="primary" @click="registerClick">{{isLogin?'注册':'返回登录'}}</el-button>
      </div>

    </div>
  </div>
</template>

<script>
import { getLogin } from '@/api/login'
import { request } from '@/network/request'

export default {
  name: 'MyLogin',
  data() {
    const validCheckPhone = (rule, value, callback) => {
      if (this.ruleForm.phone === '') {
        return callback(new Error('手机号不能为空'))
      }
      else if (!/^1[3456789]\d{9}$/.test(this.ruleForm.phone)) {
        callback(new Error('请填写正确的手机号'))
      }
      else {
        callback()
      }
    }
    const validCheckPass = (rule, value, callback) => {
      if (this.ruleForm.pass === '') {
        callback(new Error('请填写密码'))
      }
      else if (this.ruleForm.pass.length < 6 || this.ruleForm.pass.length > 18) {
        callback(new Error('请输入6-18位密码'))
      }
      else {
        callback()
      }
    }
    return {
      ruleForm: {
        phone: '',
        pass: ''
      },
      isLogin: true,
      rules: {
        checkPhone: [
          {
            required: true, validator: validCheckPhone, trigger: 'blur'
          }
        ],
        checkPass: [
          {
            required: true, validator: validCheckPass, trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    loginClick() {
      this.$refs.registerForm.validate(async valid => {
        if (!valid) return this.$message.error('请重新输入手机号和密码')
        this.$store.dispatch('getUserInfo', this.ruleForm)
        this.$message.success('登录成功')
        const { data: res } = await getLogin(this.ruleForm.phone, this.ruleForm.pass)
        console.log(res)
        this.$router.push('/home/personalrc')
      })
    },
    registerClick() {
      this.isLogin = !this.isLogin
      this.ruleForm.phone = ''
      this.ruleForm.pass = ''
      this.$refs.registerForm.resetFields()
      this.$refs.loginForm.resetFields()
      console.log(this.$refs.registerForm, this.$refs.loginForm)
    }
  }
}
</script>

<style lang="less" scoped>
.login {
  width: 100%;
  height: 100%;
  background-color: #de6cf5;
  .login-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 440px;
    height: 550px;
    background-color: #fff;
    .icon-kaiguan {
      position: absolute;
      right: 10px;
      top: 10px;
      font-size: 30px;
      &:hover {
        color: red;
        animation: rotate 0.5s;
      }
    }
    .login-img {
      text-align: center;
      margin-top: 40px;
      .icon-wangyiyunyinle {
        color: red;
        font-size: 100px;
      }
    }
    h2 {
      font-size: 30px;
      margin-top: 10px;
      text-align: center;
    }
  }
}
.el-form {
  padding: 30px;
  box-sizing: border-box;
}
.login-button {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .el-button {
    width: 300px;
    margin: 0;
    &:last-child {
      margin-top: 20px;
    }
  }
}
</style>